React Testing Library
追加で入れるlibraryなど
必須なものと、あると便利なものの差が分かりづらい #?? 「React Testing Library」がこれのこと
testing-library自体はVueなど向けにも提供してる
test code上にtsxを書くなら必要
逆に言えば、hooksのtestだけなら不要
具体例
こんな感じでかける
code:ts
import { render, screen } from '@testing-library/react';
import { describe, test, expect } from 'vitest';
import { Hoge } from './PlacesField';
describe('Hoge', () => {
render(<Hoge />);
test('test', () => {
expect(screen.getByText('Test Form'));
});
});
renderすることで、そのComponentが以下のような感じでrenderされている
code:html
<body>
<Hoge/>
</body>
これ全体screenで取得できる感じ
失敗時のロギング
docsよみ
Getting Started
Introduction
Guiding Principles
FAQ
Core API
User Actions
Firing Events
Async Methods
Appearance and Disappearance
Using Fake Timers
Advanced
Accessibility
Custom Queries
Debugging
Querying Within Elements
Configuration Options
Frameworks
DOM Testing Library
Introduction
Install
Example
Setup
API
Cheatsheet
React Testing Library
Introduction
Example
Setup
★API
render
render Options
container
baseElement
hydrate
legacyRoot
wrapper
queries
render Result
...queries
container
baseElement
debug
rerender
unmount
asFragment
cleanup
act
renderHook Options
initialProps
wrapper
renderHook Result
result
rerender
Migrate from Enzyme
FAQ
Cheatsheet
User Interactions
Ecosystem